<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="受理量" :total="cardCount.sll | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area :dataSource="chartData.sll" />
          </div>
          <template slot="footer">今日受理量：<span>{{ todaySll }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="办结量" :total="cardCount.bjl | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area :dataSource="chartData.bjl" />
          </div>
          <template slot="footer">今日办结量：<span>{{ todayBjl }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="用户受理量" :total="cardCount.isll | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-bar :dataSource="chartData.isll" />
          </div>
          <template slot="footer">用户今日受理量：<span>{{ todayISll }}</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="用户办结量" :total="cardCount.ibjl | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-bar :dataSource="chartData.ibjl" />
          </div>
          <template slot="footer">用户今日办结量：<span>{{ todayIBjl }}</span></template>
        </chart-card>
      </a-col>
    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a>今日</a>
              <a>本周</a>
              <a>本月</a>
              <a>本年</a>
            </div>
            <a-range-picker :style="{width: '256px'}" />
          </div>

          <a-tab-pane loading="true" tab="受理监管" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar title="受理量统计" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">

                <a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false"
                        :body-style="{padding: 0}">
                  <div class="item-group">
                    <a-row>
                      <a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList"
                             :key=" 'registerType'+index ">
                        <a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>
                          {{ item.text }}
                        </a-button>
                      </a-col>
                    </a-row>
                  </div>
                </a-card>

              </a-col>
            </a-row>
          </a-tab-pane>

          <a-tab-pane tab="交互监管" key="2">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar-multid :dataSource="jhjgData" :fields="jhjgFields" title="平台与部门交互量统计"></bar-multid>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">

                <a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false"
                        :body-style="{padding: 0}">
                  <div class="item-group">
                    <a-row>
                      <a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList"
                             :key=" 'registerType'+index ">
                        <a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>
                          {{ item.text }}
                        </a-button>
                      </a-col>
                    </a-row>
                  </div>
                </a-card>

              </a-col>
            </a-row>
          </a-tab-pane>

          <a-tab-pane tab="效率监管" key="3">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <line-chart-multid :dataSource="xljgData" :fields="xljgFields"
                                   title="平台与部门交互效率统计"></line-chart-multid>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">

                <a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false"
                        :body-style="{padding: 0}">
                  <div class="item-group">
                    <a-row>
                      <a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList"
                             :key=" 'registerType'+index ">
                        <a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>
                          {{ item.text }}
                        </a-button>
                      </a-col>
                    </a-row>
                  </div>
                </a-card>

              </a-col>
            </a-row>
          </a-tab-pane>

          <a-tab-pane tab="存储监管" key="4">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <a-row>
                  <template v-if="diskInfo && diskInfo.length>0">
                    <a-col :span="12" v-for="(item,index) in diskInfo" :key=" 'diskInfo'+index ">
                      <dash-chart-demo :title="item.name" :dataSource="item.restPPT"></dash-chart-demo>
                    </a-col>
                  </template>
                </a-row>
              </a-col>

              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">

                <a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false"
                        :body-style="{padding: 0}">
                  <div class="item-group">
                    <a-row>
                      <a-col :class="'more-btn'" :span="10" v-for="(item,index) in registerTypeList"
                             :key=" 'registerType'+index ">
                        <a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>
                          {{ item.text }}
                        </a-button>
                      </a-col>
                    </a-row>
                  </div>
                </a-card>

              </a-col>
            </a-row>
          </a-tab-pane>

        </a-tabs>

      </div>
    </a-card>

    <a-row :gutter="12">
      <a-card :loading="loading" :class="{ 'anty-list-cust':true }" :bordered="false" :style="{ marginTop: '24px' }">

        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <a-radio-group defaultValue="1">
              <a-radio-button value="1">转移登记</a-radio-button>
              <a-radio-button value="2">抵押登记</a-radio-button>
            </a-radio-group>
          </div>

          <a-tab-pane loading="true" tab="业务流程限时监管" key="1">

            <a-table :dataSource="dataSource1" size="default" rowKey="id" :columns="columns" :pagination="ipagination">
              <template slot="flowRate" slot-scope="text, record, index">
                <a-progress :percent="getFlowRateNumber(record.flowRate)" style="width:80px" />
              </template>
            </a-table>
          </a-tab-pane>

          <a-tab-pane loading="true" tab="业务节点限时监管" key="2">
            <a-table :dataSource="dataSource2" size="default" rowKey="id" :columns="columns2" :pagination="ipagination">
              <template slot="flowRate" slot-scope="text, record, index">
                <span style="color: red;">{{ record.flowRate }}分钟</span>
              </template>
            </a-table>
          </a-tab-pane>

        </a-tabs>


      </a-card>
    </a-row>
  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import AreaChartTy from '@/components/chart/AreaChartTy'
import DashChartDemo from '@/components/chart/DashChartDemo'
import BarMultid from '@/components/chart/BarMultid'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import Trend from '@/components/Trend'
import { getAction } from '@/api/manage'
import { filterObj } from '@/utils/util'
import moment from 'dayjs'

const rankList = []
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: '白鹭岛 ' + (i + 1) + ' 号店',
    total: 1234.56 - i * 100
  })
}

const dataCol1 = [{
  title: '业务号',
  align: 'center',
  dataIndex: 'reBizCode'
}, {
  title: '权利类型',
  align: 'center',
  dataIndex: 'droitType'
}, {
  title: '登记类型',
  align: 'center',
  dataIndex: 'registeType'
}, {
  title: '座落',
  align: 'center',
  dataIndex: 'beLocated'
}, {
  title: '权利人',
  align: 'center',
  dataIndex: 'qlr'
}, {
  title: '义务人',
  align: 'center',
  dataIndex: 'ywr'
}, {
  title: '受理人',
  align: 'center',
  dataIndex: 'acceptBy'
}, {
  title: '受理时间',
  align: 'center',
  dataIndex: 'acceptDate'
}, {
  title: '当前节点',
  align: 'center',
  dataIndex: 'curNode'
}, {
  title: '办理进度',
  align: 'center',
  dataIndex: 'flowRate',
  scopedSlots: { customRender: 'flowRate' }
}]

const dataCol2 = [{
  title: '业务号',
  align: 'center',
  dataIndex: 'reBizCode'
}, {
  title: '权利类型',
  align: 'center',
  dataIndex: 'droitType'
}, {
  title: '登记类型',
  align: 'center',
  dataIndex: 'registeType'
}, {
  title: '座落',
  align: 'center',
  dataIndex: 'beLocated'
}, {
  title: '权利人',
  align: 'center',
  dataIndex: 'qlr'
}, {
  title: '义务人',
  align: 'center',
  dataIndex: 'ywr'
}, {
  title: '受理人',
  align: 'center',
  dataIndex: 'acceptBy'
}, {
  title: '发起时间',
  align: 'center',
  dataIndex: 'acceptDate'
}, {
  title: '当前节点',
  align: 'center',
  dataIndex: 'curNode'
}, {
  title: '超时时间',
  align: 'center',
  dataIndex: 'flowRate',
  scopedSlots: { customRender: 'flowRate' }
}]

const jhjgData = [
  {
    type: '房管',
    '一月': 900,
    '二月': 1120,
    '三月': 1380,
    '四月': 1480,
    '五月': 1450,
    '六月': 1100,
    '七月': 1300,
    '八月': 900,
    '九月': 1000,
    '十月': 1200,
    '十一月': 600,
    '十二月': 900
  },
  {
    type: '税务',
    '一月': 1200,
    '二月': 1500,
    '三月': 1980,
    '四月': 2000,
    '五月': 1000,
    '六月': 600,
    '七月': 900,
    '八月': 1100,
    '九月': 1300,
    '十月': 2000,
    '十一月': 900,
    '十二月': 1100
  },
  {
    type: '不动产',
    '一月': 2000,
    '二月': 1430,
    '三月': 1300,
    '四月': 1400,
    '五月': 900,
    '六月': 500,
    '七月': 600,
    '八月': 1000,
    '九月': 600,
    '十月': 1000,
    '十一月': 1500,
    '十二月': 1200
  }
]
const jhjgFields = [
  '一月', '二月', '三月', '四月', '五月', '六月',
  '七月', '八月', '九月', '十月', '十一月', '十二月'
]

const xljgData = [
  { type: '一月', '房管': 1.12, '税务': 1.55, '不动产': 1.2 },
  { type: '二月', '房管': 1.65, '税务': 1.32, '不动产': 1.42 },
  { type: '三月', '房管': 1.85, '税务': 1.1, '不动产': 1.5 },

  { type: '四月', '房管': 1.33, '税务': 1.63, '不动产': 1.4 },
  { type: '五月', '房管': 1.63, '税务': 1.8, '不动产': 1.7 },
  { type: '六月', '房管': 1.85, '税务': 1.98, '不动产': 1.8 },

  { type: '七月', '房管': 1.98, '税务': 1.5, '不动产': 1.76 },
  { type: '八月', '房管': 1.48, '税务': 1.2, '不动产': 1.3 },
  { type: '九月', '房管': 1.41, '税务': 1.9, '不动产': 1.6 },

  { type: '十月', '房管': 1.1, '税务': 1.1, '不动产': 1.4 },
  { type: '十一月', '房管': 1.85, '税务': 1.6, '不动产': 1.5 },
  { type: '十二月', '房管': 1.5, '税务': 1.4, '不动产': 1.3 }
]
const xljgFields = ['房管', '税务', '不动产']
export default {
  name: 'Analysis',
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    AreaChartTy,
    DashChartDemo,
    BarMultid
  },
  data() {
    return {
      xljgData,
      xljgFields,
      jhjgData,
      jhjgFields,
      loading: true,
      rankList,
      zsll: 0,
      zbjl: 0,
      todaySll: 0,
      todayBjl: 0,
      todayISll: 0,
      todayIBjl: 0,
      registerTypeList: [{
        text: '业务受理'
      }, {
        text: '业务管理'
      }, {
        text: '文件管理'
      }, {
        text: '信息查询'
      }],
      // 分页参数
      ipagination: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      //数据集
      dataSource: [],
      dataSource1: [],
      dataSource2: [],
      url: {
        analysis: '/sps/register/analysis',
        list: 'sps/register/virtualList',
        countSll: 'sps/register/sllTenDaysCount',
        countBjl: 'sps/register/bjlTenDaysCount',
        countISll: 'sps/register/ISllTenDaysCount',
        countIBjl: 'sps/register/IBjlTenDaysCount',
        queryDiskInfo: 'sys/actuator/redis/queryDiskInfo'
      },
      chartData: {
        sll: [],
        bjl: [],
        isll: [],
        ibjl: []
      },
      cardCount: {
        sll: 0,
        bjl: 0,
        isll: 0,
        ibjl: 0
      },
      columns: dataCol1,
      columns2: dataCol2,
      diskInfo: []
    }
  },
  methods: {
    goPage(index) {
      if (index == 0) {
        this.$router.push({
          path: '/isps/registerStepForm',
          name: 'isps-registerStepForm'
        })
      } else if (index == 1) {
        this.$router.push({
          path: '/isps/registerList',
          name: 'isps-registerList'
        })

      } else if (index == 2) {
        this.$router.push({
          path: '/isps/fileManage',
          name: 'isps-fileManage'
        })
      } else if (index == 3) {
        this.$router.push({
          path: '/isps/infoSearch',
          name: 'isps-infoSearch'
        })
      }
    },
    loadList(arg) {
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams()//查询条件
      getAction(this.url.list, params).then((res) => {
        console.log('dsdsd', res.result)
        this.dataSource1 = res.result.data1
        this.dataSource2 = res.result.data2
        this.ipagination.total = 5
      })
    },
    getQueryParams() {
      var param = { flowStatus: '-3' }
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return filterObj(param)
    },
    formatRespectiveHoldCert(value) {
      return (value == '1' || eval(value)) ? '是' : '否'
    },
    formatCertFormat(value) {
      if (value == '1') {
        return '单一版'
      } else if (value == '2') {
        return '集成版'
      } else {
        return value
      }
    },
    getFlowRateNumber(value) {
      return Number(value)
    },
    getFlowPercent(record) {
      if (record.flowStatus == '3') {
        return 100
      } else if (record.flowStatus == '0') {
        return 0
      } else {
        return record.flowRate
      }
    },
    getFlowStatus(status) {
      if (status == '4') {
        return 'exception'
      } else if (status == '0') {
        return 'normal'
      } else if (status == '3') {
        return 'success'
      } else {
        return 'active'
      }

    },
    queryCount() {
      getAction(this.url.analysis).then((res) => {
        if (res.success) {
          this.cardCount = res.result
        }
        console.log(res)
      })
    },

    loadDiskInfo() {
      getAction(this.url.queryDiskInfo).then((res) => {
        if (res.success) {
          console.log(res.result)
          let one = 0, two = ''
          for (let a in res.result) {
            let tempNum = Number(res.result[a].max)
            if (tempNum > one) {
              one = tempNum
              two = res.result[a].name
            }
          }
          let ontItem = res.result.filter((item) => {
            return item.name == two
          })[0]
          ontItem.restPPT = ontItem.restPPT / 10
          this.diskInfo.push(ontItem)

          if (res.result.length > 1) {
            let one2 = 0, two2 = ''
            for (let a in res.result) {
              if (res.result[a].name == two) {
                continue
              }
              let tempNum = Number(res.result[a].max)
              if (tempNum > one2) {
                one2 = tempNum
                two2 = res.result[a].name
              }
            }
            let one2Item = res.result.filter((item) => {
              return item.name == two2
            })[0]
            one2Item.restPPT = one2Item.restPPT / 10
            this.diskInfo.push(one2Item)
          }

        } else {
          console.log(res.message)
        }
      })
    },
    loadChartData() {
      getAction(this.url.countSll).then((res) => {
        if (res.success) {
          let map = res.result
          for (var key in map) {
            let dataStr = key
            let value = map[key]
            let today = moment(new Date()).format('YYYY-MM-DD')
            if (dataStr == today) {
              this.todaySll = map[today]
            }
            this.chartData.sll.push({
              x: dataStr,
              y: value
            })
          }
        }

      }),
        getAction(this.url.countBjl).then((res) => {
          if (res.success) {
            let map = res.result
            for (var key in map) {
              let dataStr = key
              let value = map[key]
              let today = moment(new Date()).format('YYYY-MM-DD')
              if (dataStr == today) {
                this.todayBjl = map[today]
              }
              this.chartData.bjl.push({
                x: dataStr,
                y: value
              })
            }
          }
        }),
        getAction(this.url.countISll).then((res) => {
          if (res.success) {
            let map = res.result
            for (var key in map) {
              let dataStr = key
              let value = map[key]
              let today = moment(new Date()).format('YYYY-MM-DD')
              if (dataStr == today) {
                this.todayISll = map[today]
              }
              this.chartData.isll.push({
                x: key,
                y: value
              })
            }
          }
        }),
        getAction(this.url.countIBjl).then((res) => {
          if (res.success) {
            let map = res.result
            for (var key in map) {
              let dataStr = key
              let value = map[key]
              let today = moment(new Date()).format('YYYY-MM-DD')
              if (dataStr == today) {
                this.todayIBjl = map[today]
              }
              this.chartData.ibjl.push({
                x: key,
                y: value
              })
            }
          }
        })
    }
  },
  created() {
    this.loadDiskInfo()
    this.queryCount()
    this.loadChartData()
    this.loadList(1)
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
  }
}
</script>

<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.item-group {
  padding: 20px 0 8px 24px;
  font-size: 0;

  a {
    color: rgba(0, 0, 0, 0.65);
    display: inline-block;
    font-size: 14px;
    margin-bottom: 13px;
    width: 25%;
  }
}

.item-group {
  .more-btn {
    margin-bottom: 13px;
    text-align: center;
  }
}

.list-content-item {
  color: rgba(0, 0, 0, .45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
}

@media only screen and (min-width: 1600px) {
  .list-content-item {
    margin-left: 60px;
  }
}

@media only screen and (max-width: 1300px) {
  .list-content-item {
    margin-left: 20px;
  }

  .width-hidden4 {
    display: none
  }
}

.list-content-item {
  span {
    line-height: 20px;
  }
}

.list-content-item {
  p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 22px;
  }
}

.anty-list-cust {
  .ant-list-item-meta {
    flex: 0.3 !important;
  }
}

.anty-list-cust {
  .ant-list-item-content {
    flex: 1 !important;
    justify-content: flex-start !important;
    margin-left: 20px;
  }
}


</style>